import { useRoute } from "vue-router";

interface TabOption {
  title: string;
  className?: string;
  path: string;
}

export function useTabs(tabOptions: Ref<TabOption[]>) {
  const route = useRoute();
  const tabRefs = ref<Array<HTMLElement | any>>([]);

  onMounted(() => {
    nextTick(() => {
      const index = tabOptions.value.findIndex(
        ({ path }) => path === route.path
      );
      const target = tabRefs.value[index];
      target?.scrollIntoView({ behavior: "smooth", inline: "center" });
      window.scrollTo(0, 0);
    });
  });

  return {
    route,
    tabRefs
  };
}
